<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function createDirectLineForTest(options) {
        const FAILED = 4;
        const ONLINE = 2;

        const workingDirectLine = WebChat.createDirectLine(options);

        return {
          activity$: workingDirectLine.activity$,
          postActivity: workingDirectLine.postActivity.bind(workingDirectLine),

          connectionStatus$: new Observable(observer => {
            const subscription = workingDirectLine.connectionStatus$.subscribe({
              complete: () => observer.complete(),
              error: err => observer.error(err),
              next: connectionStatus => {
                observer.next(connectionStatus);
                connectionStatus === ONLINE && observer.next(FAILED);
              }
            });

            return () => subscription.unsubscribe();
          })
        };
      }

      run(
        async function () {
          WebChat.renderWebChat(
            {
              directLine: createDirectLineForTest({ token: await testHelpers.token.fetchDirectLineToken() }),
              store: testHelpers.createStore(),
              styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
            },
            document.getElementById('webchat')
          );

          await pageConditions.webChatRendered();
          await pageConditions.connectivityStatusShown('Unable to connect.');

          await host.snapshot();
        },
        { ignoreErrors: true }
      );
    </script>
  </body>
</html>
